<template>
  <!-- 个人中心页面 -->
  <div class="my-person">
    <div class="header">
      <p>
        <i class="el-icon-s-custom"></i> 管理
      </p>
    </div>
    <div class="main">
      <ElRow type="flex">
        <ElCol :span="5">
          <el-card class="left">
            <!-- 左侧栏目 -->
            <div class="list">
              <span class="title">菜单</span>
              <ul>
                <router-link to="/admin/user" tag="li">
                  <span>用户管理</span>
                </router-link>
                <router-link to="/admin/video" tag="li">
                  <span>视频管理</span>
                </router-link>
                <router-link to="/admin/type" tag="li">
                  <span>分类管理</span>
                </router-link>
                <router-link to="/admin/comment" tag="li">
                  <span>评论管理</span>
                </router-link>
                <router-link to="/admin/vip" tag="li">
                  <span>vip视频上传</span>
                </router-link>
                <router-link to="/admin/lunbotu" tag="li">
                  <span>轮播图管理</span>
                </router-link>
              </ul>
            </div>
          </el-card>
        </ElCol>
        <ElCol :span="19">
          <el-card class="right">
            <!-- 左边边内容区域 -->
            <div class="content">
              <router-view></router-view>
            </div>
          </el-card>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data: function() {
    return {};
  },
  methods: {
    //跳转方法，为了方便记忆和书写，全部采用中文拼音首字母
    toTg() {
      this.$router.push({ name: "tg" });
    }
  }
};
</script>

<style lang="scss" scoped>
img {
  height: 100%;
  width: 100%;
}
.my-person {
  font-size: 12px;
  margin-bottom: 12px;
  .header {
    // border-bottom: 1px solid #dcdfe6;
    p {
      padding: 0px;
      margin: 0px;
      font-size: 35px;
      font-weight: bold;
      text-align: right;
      color: #409eff;
    }
  }

  .main {
    padding-top: 12px;
    min-height: 1080px;
    /* 左边栏样式 */

    .left {
      height: 100%;
      border-right: 1px solid #dcdfe6;
      padding: 0 24px;
      /* 顶部个人信息栏样式 */
      .person {
        /* 照片 */
        text-align: center;
        .person-photo {
          min-height: 100px;
          width: 100px;
          margin: 0 auto;
          border-radius: 50px;
          overflow: hidden;
        }
        .nickname {
          font-size: 20px;
          font-weight: bold;
          color: #666;
        }
        /* 签到按钮宽度 */
        .my-btn-clock-in {
          width: 100px;
        }
        /* 个性签名 */
        .signature {
          color: #909399;
          text-align: left;
          //padding-left: 30px;
        }
        /*个人成就*/
        .person-achievement {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          color: #606266;
          .achievement-item {
            width: 33.3333333%;
            margin: 8px 0;
            span {
              display: block;
            }
            .title {
              font-style: italic;
            }
            .num {
              color: #409eff;
              font-weight: bold;
            }
          }
        }
      }
      /*选项列表*/
      .list {
        margin-top: 50px;
        font-size: 18px;
        color: #909399;
        .title {
          font-size: 24px;
          color: #606266;
        }
        li {
          margin: 15px 0;
          &:focus {
            color: #409eff;
          }
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }

    .right {
      // background: #f5f7fa;
      min-height: 1080px;
      .right-title {
        color: gray;
        background: white;
        width: 100%;
        height: 38px;
        border-bottom: 1px solid #dcdfe6;
        box-shadow: 0px 1px 1px #dcdfe6;
      }
      .content-main {
        width: 100%;
        height: 100%;
      }
      .content {
        //margin-top: 30px;
      }
    }
    .router-link-active {
      color: #409eff;
    }
  }
}
</style>